<template>
    <div class="container">
      <div class="title">告警信息</div>
      <div class="content-container">
        <div class="block-container mr-3">
          <img class="alarm-img" src="../assets/urgent.png" alt="">
          <div class="alarm-num urgent">{{urgent}}</div>
          <div class="alarm-tip">紧急告警</div>
        </div>
        <div class="block-container mr-3">
          <img class="alarm-img" src="../assets/high.png" alt="">
          <div class="alarm-num high">{{high}}</div>
          <div class="alarm-tip">高级告警</div>
        </div>
        <div class="block-container">
          <img class="alarm-img" src="../assets/medium.png" alt="">
          <div class="alarm-num medium">{{medium}}</div>
          <div class="alarm-tip">中级告警</div>
        </div>
        <div v-if="false" class="block-container">
          <img class="alarm-img" src="../assets/lower.png" alt="">
          <div class="alarm-num low">{{low}}</div>
          <div class="alarm-tip">低级告警</div>
        </div>
      </div>
    </div>
</template>

<script>

  import _ from 'lodash';
  import $ from 'jquery';
  import * as Constant from './common/Constant';

    export default {
        name: 'AlarmInfo',
        data() {
            return {
              urgent: 0,
              high: 0,
              medium: 0,

              low: 0,
            }
        },
        computed: {},
        methods: {
          getData(){
            let me = this;
            if(Constant.LOCAL){
              let data = [["OTHER", 574],["MAJOR", 1924],["WARNING", 2544]];
              let warnCount={};
              data.forEach(item=>{
                warnCount[item[0]] = item[1];
              })
              me.urgent = warnCount['MAJOR'];
              me.high = warnCount['WARNING'];
              me.medium = warnCount['OTHER'];

              me.$emit('change-is-invade', (me.urgent+me.high+me.medium)>0)

              setTimeout(me.getData, Constant.INTERVAL*1000)
            }else{
              $.get(Constant.HOST+'alarms/getAlarmsCount',function(data){
                let warnCount={};
                data.forEach(item=>{
                  warnCount[item[0]] = item[1];
                })
                me.urgent = warnCount['MAJOR'];
                me.high = warnCount['WARNING'];
                me.medium = warnCount['OTHER'];

                me.$emit('change-is-invade', (me.urgent+me.high+me.medium)>0)

                setTimeout(me.getData, Constant.INTERVAL*1000)
              }).fail(err=>{
                setTimeout(me.getData, Constant.INTERVAL*1000)
              })
            }
          },
        },
        mounted() {

        },
        created() {
          this.getData();
        }
    }
</script>

<style lang="stylus" scoped>
  .mr-3
    margin-right: 3px;
  .urgent
    color: #FF5F5F
  .high
    color: #B461FC
  .medium
    color: #FAAA6B
  .low
    color: #78FFA8
  .content-container
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    .block-container
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 5px;
      padding: 7px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .alarm-img
        width: 36px;
        height: 33px;
        margin-bottom: 4px;
      .alarm-num
        font-size: 14px;
        text-align: center;
        font-weight: bold;
      .alarm-tip
        font-size: 12px;
        color: #FFFFFF;
        letter-spacing: 0.1px;
</style>
